import React from 'react'
import { Table, Space, Button, Popconfirm } from 'antd'
import moment from 'moment'



// export default class CustomTable extends React.Component {

//   state = {
//     data: []
//   }
  
//   componentDidMount() {
//     getMessages()
//       .then(res => {
//         console.log(res)
//         this.setState({
//           data: res.list
//         })
//       })
//   }

//   render() {
//     return (
//       <Table
//         bordered
//         rowKey="_id"
//         columns={columns}
//         dataSource={this.state.data}
//         pagination={{
//           hideOnSinglePage: true,
//           showSizeChanger: true
//         }}
//       />
//     )
//   }
// }

export default function CustomeTable({setEditMessage, total, pageSize, dataSource, RemoveMessage, onPageChange}){
  const columns = [
    {
      title: '编号',
      key: 'index',
      render:(text, record, index) => {
        return <span>{index +1}</span>
      }
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '性别',
      dataIndex: 'sex'
    },
    {
      title: '地址',
      dataIndex: 'address'
    },
    {
      title: '身份证',
      dataIndex: 'cid'
    },
    {
      title: '电话',
      dataIndex: 'phone'
    },
    {
      title: '到访时间',
      dataIndex: 'createdAt',
      render: text => {
        const datatime = moment(text).format('YYYY-MM-DD HH:mm:ss')
        return (
        <span>{datatime}</span>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={()=>{
            setEditMessage(record)
          }}>修改</Button>
          <Popconfirm
            title="是否删除？"
            onConfirm={()=>{
              RemoveMessage(record._id)
            }}
            okText="是"
            cancelText="否"
          >
            <Button type="primary" danger>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  
  return (
    <Table
      bordered
      rowKey="_id"
      columns={columns}
      dataSource={dataSource}
      pagination={{
        hideOnSinglePage: true,
        showSizeChanger: true,
        pageSizeOptions: [5, 10, 20, 50, 100],
        total,
        pageSize,
        onChange: onPageChange
      }}
    />
  )
}
